<template>
  <!-- 等待接单页面 -->
  <Hand title="评价" :left="true" :iconbool="false" @back="fn"></Hand>
  <div class="box">
    <div class="waitod">
      <p>{{ route.query.childstate }} <span class="span1">已等待:  </span> </p>
      
    </div>
    <div class="labelone">
      <p class="onepo">{{ route.query.olgstate }}</p>
      <div class="labelonemain">
        <img src="@/img/门店图片/u2732.png" alt="" />
        <div>
          <p class="Labtitle">{{ route.query.name }}</p>
          <p class="Labtitle1">{{ route.query.site }}</p>
          <van-tag mark type="primary">{{ route.query.tab }}</van-tag
          >&emsp;
          <van-tag mark type="danger ">{{ route.query.tab1 }}</van-tag>
        </div>
      </div>
    </div>

    <div class="labeltre">
      <h4>订单详情</h4>
      <p>详细地址：<span>中国矿业大学南湖校区</span></p>
      <p class="labeltreText">联系人：<span>刘小牛</span></p>
      <p>联系电话：<span>188****1554</span></p>
      <p>上门时间：<span>2019-8-2  13:00</span></p>
      <p>回收内容：<span>塑料瓶、纸箱</span></p>
      <p>预计重量：<span>2KG</span></p>
      <p class="labeltreText1">备注：<span>需要协助分类</span></p>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import Hand from "../../../components/Hand.vue";
import { useRouter, useRoute } from "vue-router";
import {useCounterStore} from "../../../stores/counter"

const stores = useCounterStore()
const router = useRouter();

const route = useRoute();


function fn() {
  router.back();
}
</script>

<style lang="less" scoped>
.span1{
  color: #ccc;
  font-size: 12px;
  float: right;
  margin-right: 60px;
}
.box {
  background-color: #edfdfa;
  width: 100vw !important;
  height: 100vh;
  overflow: auto;
  .waitod {
    margin: 20px;
    background-color: white;
    width: 89vw;
    height: 20vw;
    border-radius: 3vw;
    p {
      margin-left: 8vw;
      padding-top: 2vw;
      font-weight: bolder;
    }
  }
  .labelone {
    margin: 20px;
    background-color: white;
    width: 89vw;
    height: 35vw;
    border-radius: 3vw;
    .onepo {
      margin-left: 5vw;
      padding: 3vw;
      font-weight: bolder;
    }
    .labelonemain {
      display: flex;
      margin-left: 6vw;
      margin-bottom: 6vw;
      img {
        width: 18.667vw;
        height: 18.667vw;
      }
      div {
        margin-left: 5vw;
        font-size: 1.867vw;
        .Labtitle {
          font-weight: bolder;
          font-size: 4.6vw;
          margin-bottom: 1vw;
          position: relative;
          span {
            color: #ccc;
            font-size: 2vw;
            position: absolute;
            right: -30vw;
            top: 1vw;
          }
        }
        .Labtitle1 {
          margin-bottom: 2vw;
        }
      }
    }
  }
  .labeltre {
    margin: 20px;
    background-color: white;
    width: 89vw;
    height: 100vw;
    border-radius: 3vw;
    h4 {
      margin-left: 5vw;
      padding: 3vw;
    }
    p {
      font-size: 3.067vw;
      margin: 7vw;
      font-weight: bolder;
    }
    span {
      font-size: 1.867vw;
      color: dimgrey;
      margin-left: 5vw;
    }
    .labeltreText {
      margin-left: 10vw;
    }
    .labeltreText1 {
      margin-left: 13vw;
    }
  }
}
</style>
